<template>
	<view class="page">
		<u-navbar :border-bottom='false' title-bold="true" style="font-weight: 1200;"  title="修改手机号">
		</u-navbar>
		<u-toast ref="uToast"></u-toast>
		<view class="code-get" v-if="!isSetting">
			<view class="phone">
				<text>请输入{{phone}}短信验证码</text>
			</view>
			<view class="code">
				<input type="tel" v-model="form.oldPhoneCode" maxlength="6" placeholder="请输入短信验证码">
				<view class="wrap">
						
						<u-verification-code :seconds="seconds" ref="oldCode" 
						unique-key="a"
						@change="codeChange"></u-verification-code>
						<u-button size="mini" @click="getCode(0)">{{tips}}</u-button>
				</view>
			</view>
			<view class="btn" @click="submit1()">
				<text>下一步</text>
			</view>
		</view>
		<view class="code-get" v-else>
			<view class="phone">
				<input type="tel" v-model="form.phone" maxlength="11" placeholder="请输入新的手机号"/>
			</view>
			<view class="code">
				<input type="tel" v-model="form.newPhoneCode"  maxlength="6" placeholder="请输入短信验证码">
				<view class="wrap">
						<u-verification-code :seconds="seconds" ref="newCode" 
						unique-key="a"
						@change="codeChange"></u-verification-code>
						<u-button size="mini" @click="getCode(1)">{{tips}}</u-button>
				</view>
			</view>
			<view class="btn" @click="submit2()">
				<text>完成</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone:'',
				isSetting: false,
				form:{},
				tips:'',
				seconds: 60,
							
			};
		},
		onLoad() {
			this.$u.api.getPhone().then(res=>{
				this.phone=res
				if(res==""){
					
				}
			})
		},
		methods:{
			codeChange(text) {
				this.tips = text;
			},
			getCode(v) {
				let flag
				if(v==0){
					flag=this.$refs.oldCode
				}else{
					flag=this.$refs.newCode
				}
				
				if(flag.canGetCode) {
					flag.start();
					if(v==0){
						this.$u.api.userPhoneCaptcha().then(res=>{
							this.$u.toast('验证码已发送');
						})
					}
					
					if(v==1){
						this.$u.api.userPhoneCaptcha({key:this.form.phone}).then(res=>{
							this.$u.toast('验证码已发送');
						})
					}
					
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
						
			submit1(){
				this.$u.api.updatePhone(this.form).then(res=>{
					this.isSetting=true
				})
			},
			submit2(){
				this.$u.api.updatePhone(this.form).then(res=>{
					this.$refs.uToast.show({
						title: '密码修改成功',
						duration:500,
						type: 'success',
						back:true
					})
				})
			}
			
			
		}
	}
</script>

<style scoped lang="scss">
	@import 'changePhone.scss';
</style>
